<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 全局修改box-sizing: border-box, 这种方式可能会破坏第三方css组件的布局*/
        /* *, ::before, ::after {
            box-sizing: border-box;
        } */
        /* 设置根元素 box-sizing, 后续采用继承来实现 */
        :root {
            box-sizing: border-box;
        }
        *, ::before, ::after {
            box-sizing: inherit;
        }

        body {
            background-color: #eee;
            font-family: Arial, Helvetica, sans-serif;
        }

        header {
            /* 给头部添加内边距,防止外边距折叠 */
            padding: 1em 1.5em;
            color: #fff;
            background-color: #0072b0;
            border-radius: .5em;
        }

        main {
            display: block;
        }

        /* 使用flexbox实现两侧等高布局 */
        .container {
            display: flex;
        }

        .main {
            /* 设置box-sizing,让盒子的宽度以边框为准 */
            box-sizing: border-box;
            /* 浮动布局 flex布局时不需要浮动*/
            /* float: left; */
            /* 设置宽度70% */
            /* 主列加上内边距 */
            padding: 1em 1.5em;
            width: 70%;
            background-color: #fff;
            border-radius: .5em;
        }

        .sidebar {
            /* 设置box-sizing,让盒子的宽度以边框为准 */
            box-sizing: border-box;
            /* 浮动布局 flex布局时不需要浮动*/
            /* float: left; */
            /* 设置宽度30 */
            /* width: 30%; */

            /* 基于百分比的外边距留白 */
            /* width: 29%;
            margin-left: 1%; */

            /* 基于calc计算宽度 */
            width: calc(30% - 1.5em);
            margin-left: 1.5em;

            /* 移除猫头鹰选择器添加的外边距 */
            margin-top: 0;

            padding: 1.5em;
            background-color: #fff;
            border-radius: .5em;
        }

        .button-link {
            display: block;
            padding: 0.5em;
            color: #fff;
            background-color: #0090c9;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
        }
        /* 使用相邻兄弟选择器给按钮间添加上下边距 */
        /* .button-link + .button-link {
            margin-top: 1.5em;
        } */
        .sponsor-link {
            display: block;
            color: #0072b0;
            font-weight: bold;
            text-decoration: none;
        }

        /* 猫头鹰选择器,为所有子元素添加1.5em的上边距 */
        body * + * {
            margin-top: 1.5em;
        }
    </style>
</head>
<body>
    <header>
        <h1>Franklin Running Club</h1>
    </header>
    <div class="container">
        <main class="main">
            <h2>Come join us</h2>
            <p>The Franklin LCK开赛前，T1的选手们参加了春季赛决赛周赛前见面会，回答了一些问题。4月8日，GEN和KT将参与败者组决赛，哪支队伍会晋级决赛呢？除了oner选了GEN之外，Zeus、Faker、Gumayusi、Keria包括教练bengi都选了KT，他们分别阐述了理由</p>
        </main>
        <aside class="sidebar">
            <a href="/twitter" class="button-link">'follow us on twitter'</a>
            <a href="/facebook" class="button-link">'like us on facebook'</a>
            <a href="/sponsors" class="sponsor-link">'become a sponsor'</a>
        </aside>
    </div>
</body>
</html>